<template>
	<view class="contant-box">
		<view class="order-status">
			<view class="order-status-text" :style="{color:orderDetail.status===5?'#049c37':'#325ef5'}">
				{{forrmatterEnmu(Dictionary.classifyPlanStatus, orderDetail.status)}}
			</view>
			<view class="order-time row-between">
				<text>预约上门时间</text>
				<text
					style="color: #325EF5">{{timestampToDate((orderDetail.newArriveTime || orderDetail.subscribeDate), 'ymdhm')}}</text>
			</view>
		</view>
		<view class="reqair-device">
			<view class="reqair-device-item">
				<view class="reqair-device-title">
					报修设备
				</view>
				<view class="reqair-device-des">
					{{orderDetail.device || ''}}
				</view>
			</view>
			<view class="reqair-device-item">
				<view class="reqair-device-title">
					地址
				</view>
				<view class="reqair-device-des">
					{{orderDetail.address || ''}}
				</view>
			</view>
			<view class="reqair-device-item">
				<view class="reqair-device-title">
					故障描述
				</view>
				<view class="reqair-device-des">
					{{orderDetail.remark || ''}}
				</view>
			</view>
			<view class="reqair-device-item" v-if='reqairPhotoList.length > 0'>
				<view class="reqair-device-title">
					描述图片
				</view>
				<view class="reqair-device-img">
					<image v-for="item,index in reqairPhotoList" :key="index" :src="baseUrl + item" mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<view class="reqair-device">
			<view class="reqair-device-item row-between">
				<text class="reqair-device-title">订单号</text>
				<text class="reqair-device-des">{{orderDetail.payOrdernumber || ''}}</text>
			</view>
			<view class="reqair-device-item row-between">
				<text class="reqair-device-title">下单时间</text>
				<text class="reqair-device-des">{{timestampToDate(orderDetail.createTime, 'ymdhm')}}</text>
			</view>
		</view>
		<view class="reqair-device" v-if="orderDetail.status == 4 || orderDetail.status == 5">
			<view class="reqair-device-item-2 row-between">
				<text class="reqair-device-title">价格明细</text>
				<text class="reqair-device-des"></text>
			</view>
			<view class="title-now">工时费用明细</view>
			<view class="reqair-device-item-2 row-between">
				<text class="reqair-device-title">维修工时</text>
				<text class="reqair-device-des">{{orderDetail.manHour}}h</text>
			</view>
			<view class="reqair-device-item-2 row-between">
				<text class="reqair-device-title">工时费用</text>
				<text class="reqair-device-des">￥{{orderDetail.manHourCost}}</text>
			</view>
			<view class="title-now">设备更换明细</view>
			<view class="reqair-device-item-2 row-between" v-for="(dom,i) in orderDetail.deviceRenewInfoDtos" :key="i">
				<text class="reqair-device-title">{{dom.deviceRenewInfo}}</text>
				<text class="reqair-device-des">￥{{dom.deviceRenewMoney}}</text>
			</view>
		</view>
		<you-bottom-btn v-if='orderDetail.status == 4 && disable' :btnConfig="bottomBtnConfig" @toPay="toPay">
		</you-bottom-btn>
	</view>
</template>

<script>
	import Home from '@/api/home.js'
	import Common from '@/api/common.js'
	import Dictionary from '@/utils/dictionary.js'
	import {
		timestampToDate,
		forrmatterEnmu
	} from '@/utils/index.js'
	import {
		baseUrl
	} from '@/config'
	export default {
		data() {
			return {
				baseUrl,
				Dictionary,
				orderId: null,
				orderDetail: {},
				bottomBtnConfig: [{
						text: '总计：0元',
						class: 'exhibition',
						funcName: ''
					},
					{
						text: '去支付',
						class: 'confirm',
						funcName: 'toPay'
					}
				],
				applyerId: '',
				disable: false
			}
		},
		computed: {
			reqairPhotoList() {
				return this.orderDetail.photo && this.orderDetail.photo != '' ? this.orderDetail.photo.split(",") : [];
			}
		},
		onLoad(e) {
			console.log(e)
			this.orderId = e.id;
			this.applyerId = e.applyerId
			if (e.type == 1) {
				this.getDetail();
			}
			const userId = uni.getStorageSync('userId')
			// console.log(1111,item.applyerId , userId);
			if (e.applyerId == userId) {
				this.disable = true
			}

		},
		methods: {
			timestampToDate,
			forrmatterEnmu,
			getDetail() {
				Home.getRepairOrderDetail(this.orderId).then(res => {
					let ele = res.data;
					this.orderDetail = {
						...ele.wbRepairApply,
						id: ele.id,
						repairId: ele.wbRepairApply && ele.wbRepairApply.id || null,
						manHour: ele.manHour,
						manHourCost: ele.manHourCost,
						deviceRenewInfoDtos: ele.deviceRenewInfoDtos,
						payMoney: ele.payMoney,
						payTime: ele.payTime,
						payOrdernumber: ele.payOrdernumber
					};
					this.bottomBtnConfig[0].text = '总计：' + (ele.payMoney || 0) + '元'
				})
			},
			toPay() {
				let {
					payOrdernumber
				} = this.orderDetail;
				let params = {
					id: this.orderDetail.id
				};
				console.log(params, 'params');
				Home.payOrder(params).then(res => {
					if (res.code !== 200) return
					const resParams = {
						timeStamp: res.data.data.timestamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign
					}
					// 调用微信小程序的支付接口
					uni.requestPayment({
						...resParams,
						success(res) {
							// 支付成功的回调
							uni.showToast({
								title: '支付成功！',
								icon: 'success',
								mask: true
							})
							uni.redirectTo({
								url: '/subPages/home/maintenanceRecords'
							})
						},
						fail(res) {
							// 支付失败的回调
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							})
							// uni.redirectTo({
							// 	url: '/subPages/home/maintenanceRecords'
							// })
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contant-box {
		width: 100vw;
		height: 100vh;
		background-color: #F6F8FA;
		box-sizing: border-box;
		padding: 20rpx 28rpx;
		overflow-y: auto;
		padding-bottom: calc(168rpx + env(safe-area-inset-bottom));

		.order-status {
			border-radius: 12rpx;
			background: #fff;
			padding: 40rpx 20rpx;

			.order-status-text {
				font-size: 32rpx;
				font-weight: 500;
			}

			.order-time {
				margin-top: 12rpx;

				text {
					font-size: 28rpx;
					color: $main-font-black;
				}
			}

			.order-base-info {}

		}

		.reqair-device {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 40rpx 20rpx;
			margin-top: 20rpx;

			.reqair-device-item {
				margin-bottom: 40rpx;

				&:last-of-type {
					margin-bottom: 0;
				}

			}

			.reqair-device-item-2 {
				margin-bottom: 20rpx;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			.reqair-device-title {
				color: $main-font-auxiliary;
				font-size: 28rpx;
			}

			.reqair-device-des {
				color: $main-font-black;
				line-height: 40rpx;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.reqair-device-img {
				image {
					width: 198rpx;
					height: 198rpx;
					margin-right: 30rpx;

					&:nth-of-type(3n + 1) {
						margin-right: 0;
					}
				}
			}

			.title-now {
				font-size: 28rpx;
				color: $main-font-black;
				margin-bottom: 20rpx;
				font-weight: 500;
			}
		}
	}
</style>